<template>
  <Menu mode="horizontal" theme="light" :active-name="activeTopMenu" style="float: left;height: 61px;line-height: 61px"
        @on-select="changeLeftMenu">
    <MenuItem v-for="(item,index) in topMenuList" :name="item.title" :key="index">
      <Icon :type="item.icon"></Icon>
      {{item.title}}
    </MenuItem>
  </Menu>
</template>

<script>
  import {menuRouter} from '../../router/router'

  export default {
    name: 'topMenu',
    data () {
      return {
        activeTopMenu: '',
        topMenuList: [...menuRouter]
      }
    },
    watch: {
      $route () {
        this.updateMenu()
      }
    },
    components: {},
    computed: {},
    methods: {
      updateMenu () {
        if (this.activeTopMenu !== this.$route.meta.parent) {
          this.activeTopMenu = this.$route.meta.parent
          this.changeLeftMenu(this.activeTopMenu)
        }
      },
      changeLeftMenu (item) {
        for (let i in this.topMenuList) {
          let target = this.topMenuList[i]
          if (target.title === item) {
            this.$store.commit('updateLeftMenulist', {list: [...target.routers]})

            let targetRoute = target.routers[0].children[0]
            if (targetRoute.meta.parent !== this.activeTopMenu) {
              this.$router.push({name: targetRoute.name})
            }
            break
          }
        }
      }
    },
    created () {

    },
    mounted () {
      this.updateMenu()
    }
  }
</script>

<style scoped lang="less">
  /deep/ .ivu-menu-item-active,.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover {
    color: #2d8cf0!important;
    border-bottom: 3px solid #2d8cf0!important;
  }
</style>
